<template>
	<view class="content" >
		<view class="top_box">
			<view class="left_top">
				<view class="touxiang_box">
					<image v-if="arrList.userInfo.level_name > 'vip0'" :src="arrList.userInfo.frameless_head"
						mode="scaleToFill" />
					<view class="left_box">
						<image :src="arrList.userInfo.avatar" mode=""></image>
					</view>
				</view>
				<view class="right_box">
					<view class="rtop_box">
						{{ arrList.userInfo.nickname }}
					</view>
					<view class="rbot_box">
						{{ arrList.userInfo.level_name }}
					</view>
				</view>
			</view>
			<view class="right_top">
				<!-- #ifdef MP-WEIXIN -->
				<view class="right_top_box" @tap="qiandaoBtn">
					签到领大王币
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS-->
				<view v-if="btnSta == '0'" class="right_top1_box" @tap="qiandaoBtn">
					签到领大王币
				</view>

				<view v-if="btnSta == '1'" class="right_top2_box">
					签到领大王币
				</view>
				<!-- #endif -->
				<!-- <view class="right_bot_box">
					大王币
				</view> -->
			</view>
			<view class="bottom_box">
				<view class="bot_top_box">
					还差{{ arrList.userInfo.level_diff }}成长值，升级到{{ arrList.userInfo.next_level_name }}
				</view>
				<view class="dengji_box">
					<view class="left_box">
						<view class="container">
							<!-- 第二层进度条的颜色 -->
							<view class="strip">
								<view class="blue" :style="'width:' + info.progress + '%'"></view>
							</view>
						</view>
					</view>
					<view class="right_box" v-if="arrList.userInfo.grow_value < arrList.userInfo.next_value">
						{{ arrList.userInfo.grow_value }}/{{ arrList.userInfo.next_value }}
					</view>
					<view class="right_box" v-if="arrList.userInfo.grow_value > arrList.userInfo.next_value">
						{{ arrList.userInfo.grow_value }}/满级
					</view>
				</view>
				<view class="zuidi_txt" v-if="arrList.userInfo.level_name === 'vip0'">
				</view>
				<view class="zuidi_txt" v-else>
					{{ arrList.userInfo.desc }}&nbsp;{{ arrList.userInfo.standard }}
					<image @tap="shuomingBtn"
						src="https://mh.qingfentool.vip/upload/image/20230223/293c767a8661499634779d760f194194.png" mode="">
					</image>
				</view>
				<view class="qiri_liushui">
					{{ arrList.userInfo.right_text }}
				</view>

			</view>
		</view>
		<view class="bottom_box">
			<view class="top_one_box">
				<view class="left_one">
					{{ dengjiObj.left_title }}
				</view>
				<view class="right_one" @tap="huiyuangz">
					{{ dengjiObj.right_title }}

				</view>
			</view>
			<view class="top_two_box">
				<view class="left_two">
					等级
				</view>
				<view class="center_two">
					所需流水
				</view>
				<view class="right_two">
					每日签到可领取大王币
				</view>

			</view>
			<view class="dengji_bot_box" v-for="(item, index) in dengjiList" :key="index">
				<view class="dengji_one_box">
					<view class="touxaingkuang_box">
						<image v-if="item.name > 'vip0'"
							:src="item.image"
							mode="scaleToFill"
						/>
					</view>
					<text>{{ item.name }}</text>
				</view>
				<view class="dengji_two_box">
					{{ item.total_pay }}
				</view>
				<view class="dengji_tre_box">
					{{ item.daily_integral }}
				</view>
			</view>
		</view>
		<hysm ref="huiyuanStu" :memberImg="memberImg"></hysm>
	</view>
</template>

<script>
import hysm from "@/components/popup/huiyuandengjism.vue"
export default {
	components: {
		hysm
	},
	props: {
		flag: {
			type: Boolean,
			default: false
		},
		avative: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			memberImg:'',//规则图片
			arrList: {
				userInfo: {
					nickname: "",
					id: "",
					header_count: {},
					is_login: 0,
					integral: 0,
					card_count: 0,
					fragment: 0,
					level_name: "",
					desc: '',
					right_text: '',
					standard: '',
					level_diff: '',
					next_level_name: '',
					frameless_head: '',
				}
			},
			btnSta: 0,
			// 等级进度
			info: {
				progress: '',
			},
			dengjiObj: {
				left_title: '',
				right_title: ''

			},
			dengjiList: [],
		}
	},
	
	onShow() {
		this.vipList()
		this.userList()
	},
	methods: {
		userList() {
			this.$Request.get(this.$api.user.index).then(res => {
				if (res.code == 406) {
					return;
				}
				this.arrList = res.data;
				let newnum = res.data.userInfo.grow_value / res.data.userInfo.next_value
				this.info.progress = newnum * 100
				this.btnSta = res.data.userInfo.btn_status
			});
		},
		// 说明
		shuomingBtn() {
			this.$refs.huiyuanStu.open()
		},
		//#ifdef APP-PLUS
		qiandaoBtn() {
			this.$Request.post(this.$api.user.vipSignIn).then(res => {
				this.userList()
				this.$u.toast("签到成功")
			})
		},
		//#endif
		//#ifdef MP-WEIXIN
		qiandaoBtn() {
			this.$u.toast("签到领取请前往APP程序进行领取~")
		},
		//#endif
		vipList() {
			this.$Request.get(this.$api.user.getVipRule).then(res => {

				this.dengjiObj = res.data
				this.dengjiList = res.data.list
				this.memberImg = res.data.rule_image
			})
		},
		huiyuangz() {
			uni.navigateTo({
				url: '/userPage/user/vipguize?id=' + 17
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	min-height: 100vh;
	background: #262626;
	padding-bottom: 20rpx;

	.top_box {
		width: 97%;
		height: 340rpx;
		background: linear-gradient(129deg, #E6C28D 0%, #F1D7AB 100%);
		border-radius: 18rpx;
		margin: auto;
		position: relative;

		.left_top {
			width: 50%;
			height: 130rpx;
			position: absolute;
			top: 10rpx;
			left: 15rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.touxiang_box {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				position: relative;

				image {
					position: absolute !important;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					display: block;
					z-index: 2;
					margin: auto;
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}

				.left_box {
					width: 67rpx;
					height: 67rpx;
					border-radius: 50%;
					position: absolute;
					z-index: 1;
					left: 0;
					right: 0;
					bottom: 0;
					top: 0;
					margin: auto;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}


			.right_box {
				width: 50%;
				height: 100%;

				.rtop_box {
					height: 62%;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					margin-left: 15rpx;
					line-height: 50rpx;
					color: white;
					font-size: 35rpx;
					// font-style: oblique;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					font-weight: 500;
					line-height: 88rpx;
				}

				.rbot_box {
					height: 49%;
					width: 100%;
					margin-left: 15rpx;
					font-weight: 500;
					line-height: 50rpx;
					// background-color: #fff;
					color: #A26B2F;
					font-family: YouSheBiaoTiHei-Bold, YouSheBiaoTiHei;
					font-size: 36rpx;
					line-height: 30rpx;
				}
			}

		}

		.right_top {
			width: 34%;
			height: 120rpx;
			// background-color: #fff;
			position: absolute;
			top: 34rpx;
			right: 0;

			.right_top_box {
				width: 166rpx;
				height: 52rpx;
				background: linear-gradient(270deg, #FFC673 0%, #FFC05E 100%, #E7C58A 100%);
				line-height: 52rpx;
				margin: auto;
				text-align: center;
				color: white;
				border-radius: 30rpx;
				font-size: 24rpx;
				font-weight: 500;
			}

			/*#ifdef APP-PLUS*/
			.right_top1_box {
				width: 166rpx;
				height: 52rpx;
				background: linear-gradient(270deg, #FFC673 0%, #FFC05E 100%, #E7C58A 100%);
				line-height: 52rpx;
				margin: auto;
				text-align: center;
				color: white;
				border-radius: 30rpx;
				font-size: 24rpx;
				font-weight: 500;
			}

			.right_top2_box {
				width: 166rpx;
				height: 52rpx;
				background: #D6D6D6;
				line-height: 52rpx;
				margin: auto;
				text-align: center;
				color: white;
				border-radius: 30rpx;
				font-size: 24rpx;
				font-weight: 500;
			}

			/*#endif*/
			.right_bot_box {
				width: 100%;
				height: 52rpx;
				line-height: 52rpx;
				color: #FFC26A;
				text-align: center;
				font-size: 20rpx;
				font-weight: 500;
			}
		}

		.bottom_box {
			width: 100%;
			height: 198rpx;
			position: absolute;
			bottom: 5rpx;

			.qiri_liushui {
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				color: #A26B2F;
				font-size: 20rpx;
				font-weight: 500;
			}

			.bot_top_box {
				padding-left: 29rpx;
				padding-top: 40rpx;
				width: 100%;
				height: 26rpx;
				font-size: 18rpx;
				font-weight: 400;
				color: #A26B2F;
				line-height: 26rpx;
			}

			.dengji_box {
				width: 98%;
				height: 30rpx;
				margin: auto;
				position: absolute;
				top: 80rpx;
				left: 50%;
				transform: translate(-50%);
				display: flex;
				justify-content: space-between;

				.left_box {
					width: 68%;
					height: 100%;
					padding-left: 20rpx;

					.strip {
						position: relative;
						width: 100%;
						height: 15rpx;
						color: rgba(80, 80, 80, 1);
						background-color: #FFFFFF;
						font-size: 28rpx;
						line-height: 150%;
						text-align: center;
						margin-bottom: 12upx;
						border-radius: 20upx;
						overflow: hidden;
					}

					.blue {
						height: 15rpx;
						color: rgba(80, 80, 80, 1);
						background-color: #FFE4B6;
						border-radius: 20upx;
						font-size: 28rpx;
						line-height: 150%;
						text-align: center;
					}
				}

				.right_box {
					width: 30%;
					height: 100%;
					line-height: 20rpx;
					font-size: 18rpx;
				color: #A26B2F;
				}
			}

			.zuidi_txt {
				width: 100%;
				height: 28rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: #A26B2F;
				padding-left: 29rpx;
				padding-top: 70rpx;
				line-height: 28rpx;
				position: relative;

				image {
					position: absolute;
					top: 122%;
					transform: translate(0, -50%);
					margin-left: 10rpx;
					width: 33rpx;
					height: 33rpx;
				}
			}
		}

	}

	.bottom_box {
		width: 97%;
		height: 1030rpx;
		background: linear-gradient(136deg, #E8C692 0%, #F0D6A9 100%);
		border-radius: 18rpx 18rpx 0 0;
		margin: auto;
		margin-top: 30rpx;

		.top_one_box {
			width: 100%;
			height: 34rpx;
			display: flex;
			justify-content: space-between;
			padding-top: 28rpx;

			.left_one {
				width: 70%;
				height: 34rpx;
				font-size: 24rpx;
				font-weight: 500;
				margin-left: 24rpx;
				color: #A26B2F;
				line-height: 34rpx;
			}

			.right_one {
				width: 140rpx;
				height: 34rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #A26B2F;
				margin-right: 24rpx;
				text-align: right;
				line-height: 34rpx;
				z-index: 9999;
			}
		}

		.top_two_box {
			width: 94%;
			height: 84rpx;
			display: flex;
			margin: auto;
			align-items: center;
			justify-content: space-between;
			line-height: 120rpx;

			.left_two {
				width: 33%;
				font-size: 24rpx;
				font-weight: 500;
				color: #A26B2F;
				height: 100%;
				text-align: center;
				// margin-left: 70rpx;
			}

			.center_two {
				width: 33%;
				height: 100%;
				font-size: 24rpx;
				text-align: center;
				font-weight: 500;
				// line-height: 84rpx;
				color: #A26B2F;
			}

			.right_two {
				width: 34%;
				height: 100%;
				text-align: center;
				font-size: 22rpx;
				// line-height: 84rpx;
				font-weight: 500;
				color: #A26B2F;
				// margin-right:48rpx;
			}
		}

		.dengji_bot_box {
			width: 94%;
			height: 62rpx;
			line-height: 62rpx;
			margin: 16rpx auto;
			// background: rgba(255, 207, 128, 0.2);
			// border-radius: 12rpx;
			display: flex;
			border-bottom:1rpx solid #AC6B00;
			justify-content: space-between;

			.dengji_one_box {
				width: 33%;
				height: 100%;
				font-size: 24rpx;
				font-weight: 500;
				color: #A26B2F;
				text-align: center;
				display: flex;
				justify-content: flex-start;
				padding-left: 10rpx;

				.touxaingkuang_box {
					width: 62rpx;
					height: 62rpx;
					margin-right: 16rpx;
					border-radius: 50%;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}
			}

			.dengji_two_box {
				width: 33%;
				height: 100%;
				font-size: 24rpx;
				font-weight: 500;
				color: #A26B2F;
				text-align: center;
			}

			.dengji_tre_box {
				width: 33%;
				height: 100%;
				font-size: 24rpx;
				font-weight: 500;
				color: #A26B2F;
				text-align: center;
			}
		}
	}

}
</style>
